<template>
    <div class="shopContainer">
        <div class="shopHeaderBackground">
            <div class="shopHeaderBG">
                <img :src="shopList.shopUrl">
                <div class="black"></div>
            </div>
            <div class="shopHeader">
                <div class="itema">
                    <img :src="shopList.shopUrl"> 
                </div>
                <div class="itemb">
                    {{shopList.shopName}}
                </div>
                <div class="itemc">
                    <p v-if="shopList.sendWay">蜂鸟专送/{{shopList.time}}分钟送达/配送费￥{{shopList.distributionCost/100}}</p>
                    <p v-else>商家配送/{{shopList.time}}分钟送达/配送费￥{{shopList.distributionCost/100}}</p>
                </div>
                <div class="itemd">
                    公告：{{shopList.shopNotice}}
                </div>
                <div class="iteme">
                    <div v-for="(item,index) in shopList.reduction" :key="index" class="reductionfContainer">
                        <p>{{item[0]}}减{{item[1]}}</p>
                    </div>
                    <p class="pclass" @click.prevent="getReduction">共{{distNumber}}个优惠↓</p>
                </div>
                <div class="itemf">
                    <router-link to="/home" style="text-decoration: none;">
                        <p>＜</p>
                    </router-link>
                </div>
                <el-drawer class="drawer"
                    title="优惠"
                    size="60%"
                    :visible.sync="drawer"
                    :direction="direction"
                    :before-close="handleClose">
                    <span v-for="(item,index) in distCount" :key="index">
                        <div v-show="index=='百补'">
                            <p>百补</p>
                            满{{item[0]}}可使用百亿补贴{{item[1]}}元
                        </div>
                        <div v-show="index=='满减'">
                            <p>满减</p>
                            <div v-for="(n,i) in item.length" :key="i" class="drawermsg">
                                满{{item[i][0]}}元减{{item[i][1]}}元
                            </div>
                        </div>
                        <div v-show="index=='新客'">
                            <p>新客</p>
                            首次光顾本店立减{{item/100}}元
                        </div>
                        <div v-show="index=='特价'">
                            <p>特价</p>
                            特价商品{{item/100}}元起
                        </div>
                        <div v-show="index=='折扣'">
                            <p>折扣</p>
                            折扣商品{{item/100}}折起
                        </div>
                        <div v-show="index=='配送'">
                            <p>配送</p>
                            <div v-if="item==0" class="drawermsg">免费配送</div>
                            <div v-else class="drawermsg">配送费立减{{item/100}}元</div>
                        </div>
                        <div v-show="index=='奖励'">
                            <p>奖励</p>
                            多买多得，集点可获得店铺红包
                        </div>
                    </span>
                </el-drawer>
            </div>
            <el-tabs v-model="activeName" class="barCotainer" @tab-click="handleClick" :key="activeName">
                <el-tab-pane label="点餐" name="first"><shopgoods :distributionCost="shopList.distributionCost" :reduction="shopList.reduction" :baiyi="distBaiyi" :peisong="peisong"></shopgoods></el-tab-pane>
                <el-tab-pane label="评价" name="second"><shop-evaluation v-if="activeName=='second'"></shop-evaluation></el-tab-pane>
                <el-tab-pane label="商家" name="third"><shop-message :message="message"></shop-message></el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
    import shopgoods from '../components/shopgoods.vue'
    import shopMessage from '../components/shopMessage.vue'
    import shopEvaluation from '../components/shopEvaluation.vue'
    import {mapMutations,mapState} from 'vuex'
    import axios from 'axios'
    export default{
        data(){
            return{
                shopList:{},
                drawer: false,
                direction: 'btt',
                distCount:{},
                distNumber:0,
                activeName:"first",
                message:{},
                distBaiyi:[],
                peisong:0,
            }
        },
        components:{
            shopgoods,
            shopMessage,
            shopEvaluation
        },
        mounted(){
            this.initHeader();
            let obj={};//每次进入商家页面的时候，回去红包要重新设置一次
            this.setRedBag(obj);
        },
        computed:{
            ...mapState(['shopId']),
        },
        methods:{
            ...mapMutations(['setShopName','setDistribution','setRedBag']),
            getReduction(){
                this.drawer=true;
            },
            handleClose(){
                this.drawer=false;
            },
            handleClick(tab,event){
                if(tab.name=="first"){
                    console.log('这是点餐区');
                }else if(tab.name=="second"){
                    console.log('这是评论区');
                }else if(tab.name=="third"){
                    this.third();
                }
            },
            async initHeader(){
                let url1='/shop/selectshopbasic/'+this.shopId;
                this.getRequest(url1,null,null).then(response=>{
                    if(response.code==200){
                        this.shopList=response.obj;
                        let temp=this.shopList.shopSevice.split(";");
                        let arr=[false,false,false,false,false];
                        for(let j=0;j<temp.length;j++){
                            arr[temp[j]-'0']=true;
                        }
                        this.shopList.sendWay=arr[3];//配送方式true是蜂鸟专送,false是商家配送
                        this.shopList.shopSevice=arr;
                        this.shopList.shopUrl='/file'+this.shopList.shopUrl;
                        temp=this.shopList.reduction.split(" ");
                        let reduction=[];
                        for(let j=0;j<temp.length;j=j+2){
                            let obj=[temp[j],temp[j+1]];
                            reduction.push(obj);
                        }
                        this.shopList.reduction=reduction;
                        this.setShopName(this.shopList.shopName);
                        let obj={
                            distributionCost:this.shopList.distributionCost,
                            peisong:this.peisong,
                        }
                        this.setDistribution(obj);
                    }
                })
                let url2='/shop/selectpreferential/'+this.shopId;
                this.getRequest(url2,null,null).then(response=>{
                    if(response.code==200){
                        this.distCount=response.obj;
                        if(this.distCount==null||this.distCount['百补']==undefined)
                            this.distBaiyi=[0,0];
                        else this.distBaiyi=this.distCount['百补'];
                        if(this.distCount==null||this.distCount['配送']==undefined)
                            this.peisong=0;
                        else this.peisong=this.distCount['配送'];
                        if(this.distCount==null)
                            this.distNumber=0;
                        else this.distNumber=Object.getOwnPropertyNames(this.distCount).length;
                    }
                })
            },
            async third(){
                let url3='/shop/selectshopdetails/'+this.shopId;
                this.getRequest(url3,null,null).then(response=>{
                    if(response.code==200){
                        this.message=response.obj;
                        let temp=this.message.shopPhoto.split(';');
                        for(let i=0;i<temp.length;i++)
                            temp[i]='/file'+temp[i];
                        this.message.shopPhoto=temp;
                    }
                });
            }
        }
    } 
</script>
<style lang="scss" scoped>
    @import 'mint-ui/lib/style.css';
    @import '../style/mixin';
    *{
        margin: 0;
        padding: 0;
    }
    .shopContainer{
        position: relative;
        width:100%;
        .shopHeaderBG{
            position: absolute;
            @include width-height(100%,8rem);
            z-index: -1;
            img{
                @include width-height(100%,8rem);
                background-size: cover;
                -webkit-filter: blur(3px);
                filter: blur(3px);
            }
            .black{
                @include width-height(100%,8rem);
                background-color:black;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0.5;
            }
        }
        .shopHeader{
            display: grid;
            @include width-height(100%,8rem);
            grid-template-columns: 20% 80%;
            grid-template-rows: 23% 23% 23% 31%;
            grid-template-areas: "f b"
                                 "a c"
                                 "a d"
                                 "a e";
            .itema{
                grid-area: a;
                text-align: right;
                padding:0.5rem 0.3rem 0 0;
                img{
                    @include width-height(80px,80px);
                    border-radius: 0.5rem;
                }
            }
            .itemb{
                grid-area: b;
                @include font-size-color(1.4rem,#fff);
                font-weight: bold;
            }
            .itemc{
                grid-area: c;
                @include font-size-color(1rem,#fff);
                padding-top: 0.2rem;
            }
            .itemd{
                grid-area: d;
                @include font-size-color(1rem,#fff);
                padding-top: 0.2rem;
            }
            .iteme{
                grid-area: e;
                padding-top: 0.5rem;
                .reductionfContainer{
                    display: inline;
                    p{
                        display: inline;
                        margin-right: 0.3rem;
                        background-color: #fff;
                        @include font-size-color(1rem,rgb(252, 101, 0));
                        @include width-height(15%,80%);
                        border: 1px solid rgb(252, 101, 0);
                        border-radius: 0.3rem;
                        line-height: 100%;
                        padding:0 0.3rem 0 0.3rem;
                        text-align: center;
                    }
                }
                .pclass{
                    display: inline;
                    @include font-size-color(1rem,#fff);
                    position :absolute;
                    right:1rem;
                }
            }
            .itemf{
                padding-left: 10%;
                p{
                    @include font-size-color(1.5rem,#fff);
                    @include width-height(1.5rem,1.8rem);
                    font-weight: bold;
                }
            }
            .drawer{
                span{
                    display: block;
                    @include width-height(100%,2rem);
                    margin-bottom: 0.5rem;
                    padding-left: 0.5rem;
                }
                p{
                    display: inline;
                    border:1px solid red;
                    @include font-size-color(1rem,#f00);
                    padding:0.1rem;
                }
                .drawermsg{
                    display: inline;
                }
            }
        }
        /deep/ .el-tabs__item{
            font-size:18px;
        }
        /deep/ .el-tabs__header{
            margin:0;
        }
        /deep/ .el-tabs__nav{
            padding:0.2rem;
        }
        .barCotainer{
            background-color:white;
        }
    }
</style>